<template>
  <div class="homework-record">
    <h2>作业完成记录</h2>
    <div v-if="completedHomeworks.length > 0">
      <h3>已完成作业</h3>
      <table class="homework-table">
        <thead>
          <tr>
            <th>作业名称</th>
            <th>完成时间</th>
            <th>得分</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="homework in completedHomeworks" :key="homework.id">
            <td>{{ homework.subjectName }}</td>
            <td>{{ homework.completeDate == null?"未提交" : homework.completeDate }}</td>
            <td>{{ homework.grade }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div v-else>
      <p>暂无已完成的作业记录。</p>
    </div>

    <div v-if="uncompletedHomeworks.length > 0">
      <h3>未完成作业</h3>
      <ul class="uncompleted-list">
        <li v-for="homework in uncompletedHomeworks" :key="homework.id">
          {{ homework.subjectName }}
        </li>
      </ul>
    </div>
    <div v-else>
      <p>暂无未完成的作业。</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeworkRecord",
  props: {
    homeworks: {
      type: Array,
      required: true,
    },
  },
  mounted(){
    // console.log(this.homeworks);
    
  },
  computed: {
    completedHomeworks() {
      return this.homeworks;
    },
    uncompletedHomeworks() {
      return this.homeworks.filter((homework) => homework.status == "NotSubmitted");
    },
  },
};
</script>

<style scoped>
.homework-record {
  width: 100%;
  height: 100%;
  /* 允许内容滚动 */
  overflow: auto;

  /* 隐藏滚动条的样式 */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}


.homework-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

.homework-table th,
.homework-table td {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: left;
}

.homework-table th {
  background-color: #f0f0f0;
}

.uncompleted-list {
  list-style: none;
  padding: 0;
}

.uncompleted-list li {
  padding: 5px 0;
}
</style>